<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			canvas {
				display: block;
				margin: 10px auto;
				border: 1px solid orange;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="600" height="500">上古浏览器???</canvas>
		<script>

			// 获取实际像素比例
			function getPixelRatio() {
				return window.devicePixelRatio || 1
			}
      /** @type {HTMLCanvasElement} */
			const canvas = document.getElementById('canvas')
			const ctx = canvas.getContext('2d')
			/**
			 * 高清绘制的处理方式
			 * 
			 * 在 css 里将宽高设置为原来的大小
			 * 按比例放大 canvas
			 * 考虑到内容的缩放，因此也需要将 ctx 缩放
			 */
			const ratio = getPixelRatio()

			canvas.style.width = canvas.width + 'px'
			canvas.style.height = canvas.height + 'px'

			canvas.width = canvas.width * ratio
			canvas.height = canvas.height * ratio

			// ctx.scale(ratio, ratio)
			// 绘制线条
			// ctx.beginPath() // 开始一条路径，或重置当前的路径
			// ctx.lineWidth = 20 // 线的宽度
			// ctx.strokeStyle = 'orange' // 设置或返回用于笔触的颜色、渐变或模式
			// ctx.moveTo(100, 100) // 把路径移动到画布中的指定点，不创建线条
			// ctx.lineTo(300, 300) // 添加一个新点，然后在画布中创建从该点到最后指定点的线条
			// ctx.lineTo(500, 200) // 绘制已定义的路径
			// ctx.stroke()
			// ctx.beginPath()
			// ctx.strokeStyle = 'blue'
			// ctx.lineWidth = 3
			// ctx.moveTo(600, 400)
			// ctx.lineTo(300, 400)
			// ctx.stroke()
			// ctx.closePath() // 创建从当前点回到起始点的路径
			
			// 绘制平面直角坐标系
			// const h = canvas.clientHeight
			// const w = canvas.clientWidth
			// const padding = 20
			// const paddingBottom = 20
			// const step = 100
			// //绘制坐标轴
			// ctx.beginPath()
			// ctx.lineWidth = 1
			// ctx.strokeStyle = '#999'
			// ctx.moveTo(padding, padding)
			// ctx.lineTo(padding, h * ratio - paddingBottom)
			// ctx.lineTo(w * ratio - padding, h * ratio - paddingBottom)
			// ctx.stroke()
			// ctx.closePath()
			// // 绘制 x 轴刻度
			// ctx.beginPath()
			// ctx.lineWidth = 1
			// ctx.strokeStyle = '#666'
			// for(let i = 1; i < Math.ceil((w * ratio - padding * 2) / step); i++) {
			// 	ctx.moveTo(i * step + padding, h * ratio - paddingBottom)
			// 	ctx.lineTo(i * step + padding, h * ratio - paddingBottom + 5)
			// }
			// ctx.stroke()
			// ctx.closePath()
			// // 绘制 y 轴刻度
			// ctx.beginPath()
			// ctx.lineWidth = 1
			// ctx.strokeStyle = '#666'
			// for(let i = 1; i < Math.ceil((h * ratio - padding - paddingBottom) / step); i++) {
			// 	ctx.moveTo(padding, (h * ratio - paddingBottom) - (i * step))
			// 	ctx.lineTo(padding + 5, (h * ratio - paddingBottom) - (i * step))
			// }
			// ctx.stroke()
			// ctx.closePath()
			// 后续可将改代码封装为一个函数来复用
			
			// // 绘制矩形
			// ctx.beginPath()
			// ctx.lineWidth = 1
			// ctx.strokeStyle = "#000"
			// ctx.fillStyle = 'cornflowerblue'
			// ctx.rect(100, 100, 300, 200)
			// // 先填充后描边，否则线宽会出现意想不到的宽度
			// ctx.fill() // 填充
			// ctx.stroke()
			// ctx.closePath()
			// // 绘制描边矩形
			// ctx.beginPath()
			// ctx.lineWidth = 1
			// ctx.strokeStyle = '#FFA500'
			// ctx.strokeRect(410, 100, 300, 200)
			// ctx.closePath()
			// // 绘制填充矩形
			// ctx.beginPath()
			// ctx.fillStyle = 'aquamarine'
			// ctx.fillRect(100, 310, 300, 200)
			// ctx.closePath()
			
			// 绘制直方图
			// ctx.beginPath()
			// for(let i = 1; i < Math.ceil((w * ratio - padding * 2) / step); i++) {
			// 	const randomH = Math.random() * 600 + 10
			// 	ctx.fillStyle = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16)
			// 	ctx.fillRect((i * step), h * ratio - paddingBottom - randomH, 40, randomH)
			// }
			// ctx.closePath()

      // 绘制圆环
      // ctx.beginPath()
      // ctx.lineWidth = 1
      // ctx.strokeStyle = 'orange'
      // ctx.arc(400, 300, 200, 0 ,Math.PI / 4 , true)
      // ctx.stroke()
      // ctx.closePath()

      // 绘制圆形
      // ctx.beginPath()
      // ctx.fillStyle = 'green'
      // ctx.moveTo(400, 300)
      // ctx.arc(400, 300, 100, 0, Math.PI / 2)
      // ctx.fill()
      // ctx.closePath()

      // 绘制文字
      // ctx.fillStyle = 'orange'
      // ctx.font = 'bold 60px 微软雅黑'
      // ctx.fillText('你愁啥', 100, 100)

      // ctx.textAlign = 'center'
      // ctx.textBaseline = 'middle'
      // ctx.strokeStyle = 'red'
      // ctx.strokeText('丑的很.........', 300, 300)
		</script>
	</body>
</html>
